<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Music Make You Hole</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <main>
    <!-- 歌曲&作者 -->
    <div class="text-area">
      <div class="songName">美春の告白</div>
      <div class="author">菅野祐悟</div>
    </div>


    <!-- 音频 -->
    <audio src="./audio/菅野祐悟 - 美春の告白.mp3"></audio>

    <!-- 中间内容 -->
    <div class="content">
      <div class="cover">
        <img src="./image/1.JPG" class="rotate_img">
      </div>
      <div class="lyric">
        纯音乐，请欣赏
      </div>
    </div>

    <!-- 进度条 -->
    <div class="progress_bar">
      <div class="time_bar"></div>
      <div class="time_dot"></div>
    </div>

    <!-- 控制栏 -->
    <div class="control_bar">
      <div class="showTime">00:00 / 00:00</div>
      <div class="controls">
        <div class="previous"><img src="./image/上一首.svg" alt=""></div>
        <div class="control"><img src="./image/播放.svg" alt="" class="change"></div>
        <div class="next"><img src="./image/下一首.svg" alt=""></div>
      </div>
      <div class="volume">
        <img src="./image/音量.svg" alt="" class="voice_img">
        <input type="range" name="range_speed" id="range_speed" min="0" max="10" value="5" oninput="changeSpeed()" />
      </div>
    </div>
  </main>
</body>
<script src="./index.js"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  changeSpeed();
  function changeSpeed() {
    var value = $('#range_speed').val();
    var valStr = (value * 10) + "% 100%";
    $('#value1').html(value);
    $('#range_speed').css({
      "background-size": valStr
    })
    console.log('ok');
    console.log(value);
    audio.volume = (+value / 10)
  };
  
  
</script>

</html>